<template>
	<div id="movie">


		<div class="carousel slide" id="slidershow" data-ride="carousel" data-interval="3000" style="margin-top:-20px; ">
			<!--计数器-->
			<ol class="carousel-indicators" style="position: absolute;top:260px;">
				<!-- 			<li class="active" data-target="#slidershow" data-slide-to="0"></li>
									<li data-target="#slidershow" data-slide-to="1"></li>
									<li data-target="#slidershow" data-slide-to="2"></li> -->
				<li :class="{active:index==0}" data-target="#slidershow" :data-slide-to="index" v-for="(item,index) in rotation"></li>
			</ol>
			<!--图片容器-->
			<div class="carousel-inner">

				<div :class="{item:true ,active:index===0}" v-for="(item,index) in rotation">
					<router-link :to="{path:'/play',query:{kw:item.title}}">
						<img :src="'https://images.weserv.nl/?url='+item.imgUrl"/>
					</router-link>
					<!--添加对应标题和内容-->
					<div class="carousel-caption">
						<h4>{{item.title}}</h4>
					</div>
				</div>

				<!--轮播导航-->
				<a href="#slidershow" data-slide="prev" class="left carousel-control" role="button">
					<img src="../assets/img/left.png" class="slide" />
				</a>
				<a href="#slidershow" data-slide="next" class="right carousel-control" role="button">
					<img src="../assets/img/right.png" class="slide" />
				</a>


			</div>
		</div>



		<ul class="type">

			<li><a href="#" @click="update('dongzuo')">动作</a></li>
			<li><a href="#" @click="update('hlw')">好莱坞</a></li>
			<li><a href="#" @click="update('aiqing')">爱情</a></li>
			<li><a href="#" @click="update('Rebo')">爱奇艺热播</a></li>
			<li><a href="#" @click="update('lishi')">历史</a></li>
			<li><a href="#" @click="update('zhuanji')">传记</a></li>
			<li><a href="#" @click="update('jingdian')">经典</a></li>
			<li><a href="#" @click="update('zainan')">灾难</a></li>
			<li><a href="#" @click="update('shaoer')">少儿</a></li>
			<li><a href="#" @click="update('donghua')">动画</a></li>
			<li><a href="#" @click="update('xiangcun')">乡村</a></li>
			<li><a href="#" @click="update('wuxia')">武侠</a></li>
			<li><a href="#" @click="update('shenhua')">神话</a></li>
			<li><a href="#" @click="update('tiyu')">体育</a></li>
			<li><a href="#" @click="update('jingfei')">警匪</a></li>
			<li><a href="#" @click="update('kehuan')">科幻</a></li>
			<li><a href="#" @click="update('qingchun')">青春</a></li>
			<li><a href="#" @click="update('jingsong')">惊悚</a></li>
			<li><a href="#" @click="update('maoxian')">冒险</a></li>
			<li><a href="#" @click="update('xiju')">喜剧</a></li>
			<li><a href="#" @click="update('nvxing')">女性</a></li>
				<li><a href="#" @click="update('tv')">电视剧</a></li>
			<li><a href="#" @click="update('oumei')">欧美大片</a></li>
				<li><a href="#" @click="update('gangtai')">港台大片</a></li>
			、
		</ul>


		<div style="z-index: 100; right: 2.625rem; position: fixed; bottom: 6.25rem;">
			<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2073644531&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:2073644531:53"
				 alt="有请联系我" title="有请联系我" /></a>
		</div>

		<poster v-for="(item,index) in $store.getters.getMovie" :actor="item.acotr" :poster="item.imgUrl" :title="item.title"
		 :url="getUrl(item.title)" :key="index">

		</poster>

		<nav>
			<ul class="pagination pagination-lg">
				<li>
					<a href="#" aria-label="Previous">
						<span aria-hidden="true">«</span>
					</a>
				</li>
				<li><a @click="getmovies($store.getters.getType,1)">1</a></li>
				<li><a href="#" @click="getmovies($store.getters.getType,2)">2</a></li>
				<li><a href="#" @click="getmovies($store.getters.getType,3)">3</a></li>
				<li><a href="#" @click="getmovies($store.getters.getType,4)">4</a></li>
				<li><a href="#" @click="getmovies($store.getters.getType,5)">5</a></li>
				<li><a href="#" @click="getmovies($store.getters.getType,6)">6</a></li>
				<li><a href="#" @click="getmovies($store.getters.getType,7)">7</a></li>
				<li><a href="#" @click="getmovies($store.getters.getType,8)">8</a></li>
				<li><a href="#" @click="getmovies($store.getters.getType,9)">9</a></li>
				<li><a href="#" @click="getmovies($store.getters.getType,10)">10</a></li>

				<li>
					<a href="#" aria-label="Next">
						<span aria-hidden="true">»</span>
					</a>
				</li>
			</ul>
		</nav>



<footers></footers>


	</div>

</template>


<script>
	
	import poster from "../components/poster.vue"
import footers from '../components/footer.vue'

	import {
		gethlw,
		getRotation,
		getmovie

	} from "../network/home.js"



	export default {
		name: 'movie',
		data() {
			return {
				rotation: [],
				type: ["dongzuo", "gaoxiao", "wenyi", "lishi", "zhuanji", ""],
				movies: {
					page: 1,
					type: 'hlw',
					movie: []
				}
			}
		},
		components: {
			poster,
			footers
			
		},
		beforeCreate() {

			getRotation().then(res => {
				this.rotation = res.data;

			}).then(err => {
				console.log(err)
			});


		},
		mounted() {
			let url = "get" + this.$store.getters.getType + "?page=" + this.$store.getters.getPage;
	
			getmovie(url).then(res => this.$store.commit('movieUpdate', res.data)).catch(err => console.log(err));
		},
		methods: {
			req() {
				getRotation().then(res => {
					this.rotation = res.data;
					console.log(this.rotation)
				}).then(err => {
					console.log(err)
				});
			},


			getImages(_url) {
				if (_url !== undefined) {
					let _u = _url.substring(7);
					return 'https://images.weserv.nl/?url=' + _u;
				}
			},
			getmovies(type, page) {
				this.$store.commit('pageUpdate', page);
				this.$store.commit('typeUpdate', type);
				let url = "get" + type + "?page=" + page

				getmovie(url).then(res => this.$store.commit('movieUpdate', res.data)).catch(err => console.log(err));
			},
			update(type) {
				this.$store.commit('typeUpdate', type);
				this.$store.commit('pageUpdate', 1);
				let url = "get" + this.$store.getters.getType + "?page=" + this.$store.getters.getPage;
				// console.log("movie.vue==>beforeUpdate")
				getmovie(url).then(res => this.$store.commit('movieUpdate', res.data)).catch(err => console.log(err));
			},
			getUrl(title) {
				return "/poster?kw=" + title
			}


		}

	}
</script>

<style>
	.slide {
		height: 10.25rem;
		margin-top: 9.65rem;

	}


	.carousel-control {

		width: 10.75rem;
	}

	.carousel-inner {
		height: 30.25rem;
	}

	.item {
		height: 80%;
	}

	.item a {
		/* height: 100%; */
		width: 80%;
		text-align: center;
		background-color: #122B40;
		display: block;
		margin: 0 auto;

	}

	.item a img {

		width: 91.5rem;
		height: 50rem;


	}

	.carousel-caption {
		color: #5E5E5E;
		/* background-color: #000000; */
		margin-bottom: -8.025rem;
	}

	.type {
		height: 2.875rem;
		background-color: #222222;
		list-style: none;
		margin-top: 20.25rem;
		line-height: 2.875rem;
		border-left: 0.3125rem solid #1B6D85;
	}

	.type li {
		float: left;
		margin-right: 1.175rem;
	}

	a {
		cursor: pointer;
	}
</style>
